<template>
    <div class="modal" :class="{'modal--show': isShow}" ref="module">
        <div class="modal-dialog" :style="{'width': width + 'px'}">
            <div class="modal-content" ref="modalContent">
                <slot></slot>
            </div>
        </div>
    </div>
</template>

<script type="text/babel">
    export default {
        props: {
            title: {
                type: String,
                default: ''
            },
            show: {
                require: true,
                type: Boolean
            },
            width: {
                type: Number,
                default: 520
            },
            callback: {
                type: Function,
                default() {
                }
            },
            effect: {
                type: String,
                default: 'fade'
            },
            backdrop: {
                type: Boolean,
                default: true
            }
        },
        computed: {
            isShow() {
                return this.show;
            }
        },
        watch: {
//            show(newVal, oldVal) {
//                const el = this.$el;
//                const body = document.body;
//
////                if (val) {
////                    $('body').css('overflow-y','hidden');
////                } else {
////                    $('body').css('overflow-y','auto');
////                }
//
////                if (val) {
////                    el.querySelector('.modal-content').focus();
////                    el.style.display = 'block';
////                    setTimeout(()=> el.classList.add('in'), 0);
////                    body.classList.add('modal-open');
////                    var me = this;
////                    $(this.$el).tap(function (e){
////                        if (e.target === el) me.show = false;
////                    });
////                    $('body').css('overflow-y','hidden');
////                    $('#content-body').css({
////                        'overflow-y': 'hidden',
////                        'pointer-events': 'none'
////                    });
////                } else {
////                    el.classList.remove('in');
////                    setTimeout(()=> {
////                        el.style.display = 'none';
////                        body.classList.remove('modal-open');
////                        body.style.paddingRight = '0';
////                    }, 0);
////                    $('body').css('overflow-y','scroll');
////                    $('#content-body').css({
////                        'overflow-y': 'scroll',
////                        'pointer-events': 'auto'
////                    });
////                }
//            }
        },
        mounted() {
            this._animate();
        },
        methods: {
            _animate() {
                setTimeout(() => {
                    $(this.$refs.module).addClass('modal--animate');
                    let $dialog = $(this.$refs.modalContent);
                    $dialog.addClass('modal-content--enter');
                    setTimeout(() => {
                        $dialog.removeClass('modal-content--enter').addClass('modal-content--enter-active');
                    }, 0.2);
                }, 0);
            },
            close() {
                this.isShow = false;

            }
        }
    }
</script>

<style lang="sass" rel="stylesheet/scss">
    .modal {
        $zIndex_modal: 90;

        display: none;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: $zIndex_modal;
        background-color: rgba(0, 0, 0, 0.5);
        opacity: 0;

        transition: all 0.2s ease;

        &--show {
            display: block;
        }
        &--animate {
            opacity: 1;
        }
        .modal-content {
            background-color: #fff;
            border-radius: 6px;
            &--enter {
                opacity: 0;
                transform: scale(0.85);
            }
            &--enter-active {
                transition: all 0.2s ease-out;
            }
        }
        .modal-dialog {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border: 12px rgba(255,255,255,.15) solid;
            border-radius: 4px;

            .modal-header {
                padding: 24px;
                color: #666;
                .modal-title {
                    font-size: 13px;
                    font-weight: bold;
                }
                .close {
                    display: inline-block;
                    float: right;
                    line-height: 1;
                    font-size: 20px;
                    color: #666;
                    &:hover {
                        transition: all 0.4s ease;
                        transform: rotate(90deg);
                    }

                }
            }
            .modal-body {

                padding: 8px 0 16px;
                .col-row{
                    display: flex;
                    justify-content: center;
                }
                input {
                    padding: 0 8px;
                    border: 1px solid #efefef;
                    box-shadow: 0 0 0 1000px white inset;
                    &:focus {
                       /* box-shadow: 0 0 0 1000px white inset;
                        0 0 6px -1px #10a825;*/
                        border: 1px solid #1e97fc;
                    }
                }

                input,textarea,select{
                    color: #333;
                }
            }
            .modal-footer {
                padding: 8px 24px 32px;
                .btn-group {
                    text-align: center;
                    > .ui-btn {
                        width: 124px;
                        margin-right: 32px;
                        &:last-child {
                            margin-right: 0;
                        }
                    }
                    >.btn-cancel {
                        vertical-align: middle;
                    }
                }
                [class^="col"] {
                    .btn-group {
                        text-align: left;
                    }
                }
                &:after {
                    display: table;
                    content: "";
                    clear: both;
                }
            }
        }
    }
</style>
